<template>
  <div class="private_edit">
    <div class="viewPort" ref="viewPort">
      <el-card class="box-card" ref="boxCard">
        <div class="title">
          <span>修改私有停车信息</span>
        </div>
        <div class="detail">
          <div class="elForm">
            <el-form
              :model="edit"
              :rules="rules"
              ref="ruleForm"
              label-width="auto"
            >
              <el-row>
                <el-col :span="24">
                  <el-form-item label="私有者" prop="private_name">
                    <el-input v-model="edit.private_name" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="联系电话" prop="private_tel">
                    <el-input v-model="edit.private_tel" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="开始时间" prop="private_start_time">
                    <el-date-picker
                      v-model="edit.private_start_time"
                      type="datetime"
                      placeholder="选择日期时间"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="结束时间" prop="private_end_time">
                    <el-date-picker
                      v-model="edit.private_end_time"
                      type="datetime"
                      placeholder="选择日期时间"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="状态" prop="private_status">
                    <el-switch
                      v-model="edit.private_status"
                      active-text="开启"
                      inactive-text="关闭"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                    >
                    </el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div style="margin-top: 25px" v-if="!next">
              <el-button icon="el-icon-arrow-left" @click="back"
                >返回</el-button
              >
            </div>
            <div class="next_btn" ref="next_btn" @click="nextStep">
              <div class="next_btn1">
                <span>绑定停车位</span>
              </div>
              <div class="next_btn2">
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </div>
          <div class="bindSapce">
            <div class="spaceSearch">
              <el-input
                placeholder="请输入车位编号"
                v-model="searchData"
                clearable
                style="width: 220px"
              >
              </el-input>
              <el-button
                type="primary"
                icon="el-icon-search"
                style="margin-left: 15px"
                @click="search"
                >搜索</el-button
              >
            </div>
            <el-card class="box-card2" shadow="hover">
              <div class="table">
                <el-table
                  ref="selectTable"
                  :data="spaceData.slice((lazyPage - 1) * 5, lazyPage * 5)"
                  highlight-current-row
                  style="margin: 0px auto; width: 100%"
                  size="small"
                  @current-change="selectRow"
                >
                  >
                  <el-table-column property="space_no" label="编号" width="50">
                  </el-table-column>
                  <el-table-column
                    property="space_charge_type"
                    label="充电车位"
                    width="100"
                  >
                    <template slot-scope="scope">
                      <span v-if="scope.row.space_charge_type"
                        ><i
                          class="el-icon-circle-check"
                          style="color: #67c23a"
                        ></i
                      ></span>
                      <span v-else
                        ><i
                          class="el-icon-circle-close"
                          style="color: #f56c6c"
                        ></i
                      ></span>
                    </template>
                  </el-table-column>
                  <el-table-column property="reg_type" label="状态" width="100">
                    <template slot-scope="scope">
                      <span v-if="scope.row.reg_type"
                        ><i
                          class="el-icon-circle-check"
                          style="color: #67c23a"
                        ></i
                      ></span>
                      <span v-else
                        ><i
                          class="el-icon-circle-close"
                          style="color: #f56c6c"
                        ></i
                      ></span>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  small
                  layout="prev, pager, next"
                  :total="total"
                  :current-page="currentPage"
                  @current-change="handleCurrentChange"
                >
                </el-pagination>
              </div>
            </el-card>
          </div>
          <div class="btn" v-if="next">
            <el-button icon="el-icon-arrow-left" @click="back">返回</el-button>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              style="margin: 50px 50px"
              >提交<i class="el-icon-arrow-right el-icon--right"></i
              ><i class="el-icon-upload el-icon--right"></i
            ></el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import Qs from "qs";
export default {
  name: "Private_Edit",
  props: ["privateData"],
  inject: ["privateRefresh"],
  data() {
    return {
      next: false,
      edit: {
        private_id: 1,
        private_name: "",
        private_tel: "",
        private_status: true,
        private_start_time: "",
        private_end_time: "",
      },
      spaceData: [
        {
          space_id: 1,
          space_no: 1,
          space_charge_type: true,
          space_status: true,
        },
      ],
      rules: {
        private_name: [
          { required: true, message: "请输入私有者", trigger: "blur" },
        ],
        private_tel: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ],
        private_start_time: [
          { required: true, message: "请输入开始时间", trigger: "blur" },
        ],
        private_end_time: [
          { required: true, message: "请输入结束时间", trigger: "blur" },
        ],
      },
      searchData: "",
      bindSpaceId: null,
      currentPage_old: 1,
      currentPage: 1,
      total: 0,
    };
  },
  mounted() {
    const id = this.$route.params.id;
    let result = this.privateData.find((item) => {
      if (item.private_id == id) {
        return item;
      }
    });
    this.edit = result;
  },
  computed: {
    lazyPage: function () {
      if (this.currentPage < 4) {
        return this.currentPage;
      } else {
        return this.currentPage % 3 === 0 ? 3 : this.currentPage % 3;
      }
    },
  },
  methods: {
    back() {
      this.$store.commit("maskStatus_change", false);
      this.$router.go(-1);
      this.pageRefresh();
    },
    submitForm(formName) {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          const privateId = this.edit.private_id;
          const edit = this.edit;
          if (this.bindSpaceId) {
            const spaceId = this.bindSpaceId;
            this.axios
              .post(
                "/private/bindingSpace",
                Qs.stringify({
                  privateId,
                  spaceId,
                })
              )
              .then((res) => {
                if (res.data.code === "200") {
                  this.$message({
                    message: "绑定停车位成功",
                    type: "success",
                  });
                }
              })
              .catch((err) => {
                console.error(err);
                this.$message.error("绑定停车位失败");
              });
          }
          this.axios
            .post("/private/changeInfo", edit, {
              "Content-Type": "application/json",
            })
            .then((res) => {
              if (res.data.code === "200") {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });
              }
              this.back();
            })
            .catch((err) => {
              console.error(err);
              this.$message.error("修改私有者信息失败");
            });
        } else {
          this.$message({
            message: "请完整填写表单",
            type: "warning",
          });
          return false;
        }
      });
    },
    //刷新页面
    pageRefresh() {
      this.privateRefresh();
    },
    nextStep() {
      const viewPort = this.$refs.viewPort;
      const next_btn = this.$refs.next_btn;
      next_btn.style.display = "none";
      viewPort.classList.add("vnext");
      this.next = true;
      this.getNoPrivateSpace();
    },
    //获取停车位不属于私有车位列表
    getNoPrivateSpace() {
      this.axios
        .get("/space/noPrivateSpace", {
          params: {
            page: 1,
            count: 9,
          },
        })
        .then((res) => {
          if (res.data.code === "200") {
            this.spaceData = res.data.data.list;
            this.total = res.data.data.total;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("获取不属于私有停车位列表失败");
        });
    },
    //搜索
    search() {
      this.axios
        .get("/space/searchNoPrivateSpace", {
          params: {
            page: 1,
            count: 9,
            spaceNo: this.searchData,
          },
        })
        .then((res) => {
          if (res.data.code === "200") {
            this.spaceData = res.data.data.list;
            this.total = res.data.data.total;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("搜索不属于私有停车位列表失败");
        });
    },
    selectRow(val) {
      this.bindSpaceId = val.space_id;
    },
    //分页函数
    handleCurrentChange(val) {
      this.currentPage = val;
      if (Math.ceil(this.currentPage_old / 3) !== Math.ceil(val / 3)) {
        this.currentPage_old = val;
        this.pageLoad("/space/noPrivateSpace", val, 3, 9)
          .then((res) => {
            this.spaceData = res.data.data.list;
          })
          .catch((err) => {
            console.error(err);
            this.$message.error(`获取不属于私有停车位列表-第${val}页失败`);
          });
      }
    },
  },
};
</script>

<style scoped>
.viewPort {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translate(-30%, 0);
  width: 490px;
  height: 620px;
  z-index: 999;
  overflow: hidden;
}
.vnext {
  transform: translate(-35%, 0);
  width: 980px;
  height: 620px;
  transition: all 0.6s ease;
}
.box-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 980px;
  height: 620px;
  z-index: 98;
}
.next {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(0, 15%);
}

.title {
  width: 90%;
  height: 5vh;
  padding: 0 0 0 30px;
  line-height: 3vh;
  text-align: left;
  font-size: 1.2rem;
  font-weight: 600;
  border-bottom: 1px dashed #c4c6c7;
}
.title span {
  display: inline-block;
  width: 80%;
  height: 55%;
  padding: 0px 20px;
  border-left: 5px solid #3b83cc;
}
.detail {
  position: relative;
  margin: 30px auto;
  width: 80%;
}
.detail /deep/ .el-input {
  width: 85%;
}
.detail /deep/ .el-form-item__error {
  margin-left: 8%;
}
.elForm {
  position: absolute;
  top: 50%;
  left: -8%;
  width: 25vw;
}

.next_btn {
  color: #909399;
}
.next_btn1 {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translate(0, -130%);
  width: 2vw;
  height: 8vh;
}
.next_btn2 {
  position: absolute;
  right: -13%;
  top: 50%;
  transform: translate(0, -65%);
  width: 2vw;
  height: 8vh;
}
.next_btn:hover {
  cursor: pointer;
  color: #409eff;
}
.bindSapce {
  position: absolute;
  right: 0;
  top: 50%;
  width: 50%;
}

.box-card2 {
  margin-top: 20px;
  padding: 0;
  height: 33vh;
}
.btn {
  position: absolute;
  top: 320px;
  left: 30%;
}
.table /deep/.el-table th > .cell {
  text-align: center;
}

.table /deep/.el-table .cell {
  text-align: center;
}
</style>